<template>
    <template v-for="(item) in menuData">
        <el-menu-item v-if="!item.children || item.children.length == 0" :index="`${props.index}-${item.meta.id}`"
            :key="`${props.index}-${item.meta.id}`" @click="handleClick(item, `${props.index}-${item.meta.id}`)" >
            <el-icon size="20">
                <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{ item.meta.name }}</span>
        </el-menu-item>
        <el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
            <template #title>
                <el-icon size="20">
                    <component :is="item.meta.icon"></component>
                </el-icon>
                <span>{{ item.meta.name }}</span>
            </template>
            <treeMenu
                :menuData="item.children":index="`${props.index}-${item.meta.id}`"
            >
            </treeMenu>
        </el-sub-menu>
    </template>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();

const router = useRouter();// 路由实例

const props = defineProps(['menuData', 'index']);// console.log(props.menuData); 测试点:代理对象 --> menuData、index
const menuData = props.menuData;

const handleClick = (item,reactive) => {

    store.commit('addMenu', item.meta);

    store.commit('updateMenuActive',reactive);

    router.push(item.meta.path);
};
</script>

<style></style>